<script setup lang="ts">
const name = "animaCard3"
import {ref , onMounted , toRefs} from "vue"
import QuickSwitchingText from "@/components/common_lib/QuickSwitchingText.vue";
import type { QuickSwitchingTextRef } from "@/components/common_lib/QuickSwitchingText.vue";


const quickSwitchingTextRef = ref<QuickSwitchingTextRef>();

onMounted(() => {
    console.log('_______')

})


const checkBtn = () => {
    quickSwitchingTextRef.value?.restart();
}

</script>

<template>
    <div class="animaCard3">
        <div class="animaBox">
            <QuickSwitchingText class="content" finalText="Arpat The Great" :textList="[
        'Zglzh Ghs Bvfad',
        'Sdlzh Ghs Bvfad',
        'Zfgzh Ghs Bvfad',
        'Afgzh Ghs Bvfad',
        'Agghh Ghs Bvfad',
        'Agddh Ghs Bvfad',
        'Adszh Ghs Bvfad',
        'Arffh Ghs Bvfad',
        'Arfgh Ghs Bvfad',
        'Arezh Ghs Bvfad',
        'Arpsh Ghs Bvfad',
        'Arpzr Ghs Bvfad',
        'Arpaq Ghs Bvfad',
        'Arpaw Ghs Bvfad',
        'Arpae Ghs Bvfad',
        'Arpat Acs Bvfad',
        'Arpat Tgd Bvfad',
        'Arpat Tvs Bvfad',
        'Arpat Thq Bvfad',
        'Arpat Tht Bvfad',
        'Arpat The Bvfad',
        'Arpat The Tvfad',
        'Arpat The Yvfad',
        'Arpat The Gvfad',
        'Arpat The Gyfad',
        'Arpat The Gtfad',
        'Arpat The Grrad',
        'Arpat The Grtad',
        'Arpat The Gryad',
        'Arpat The Gretd',
        'Arpat The Gredd',
        'Arpat The Grezd',
        'Arpat The Gread',
        'Arpat The Greaz',
        'Arpat The Great',
      ]" :duration="1900" ref="quickSwitchingTextRef" />
        </div>

        <el-button class="btn" type="primary" @click="checkBtn" size="large" >{{ name }}</el-button>
    </div>
</template>

<style scoped lang="scss">

  .animaCard3{
    margin: 10px;
    background-color: white;
    width: 380px;
    height: 120px;
    text-align: center;
    //padding-top: 15px;
    .animaBox{
      margin-top: 15px;
      font-size: 1.6em;
      font-family: Arial;
    }
    .btn{
      margin-top: 15px;
    }
  }

</style>